import {
  Form,
  Input,
  Spin,
  Notification,
  Button,
  Space,
} from '@arco-design/web-react';
import { FormInstance } from '@arco-design/web-react/es/Form';
import { IconLock, IconUser } from '@arco-design/web-react/icon';
import React, { useEffect, useRef, useState } from 'react';
import axios from 'axios';
import useStorage from '@/utils/useStorage';
import useLocale from '@/utils/useLocale';
import locale from './locale';
import styles from './style/index.module.less';
import { post } from '@/utils/request';

export default function LoginForm() {
  const formRef = useRef<FormInstance>();
  const [errorMessage, setErrorMessage] = useState('');
  const [loading, setLoading] = useState(false);
  const [initing, setIniting] = useState(false);
  const [loginParams, setLoginParams, removeLoginParams] =
    useStorage('loginParams');

  const t = useLocale(locale);

  const [rememberPassword, setRememberPassword] = useState(!!loginParams);

  function afterLoginSuccess(params) {
    // 记住密码
    if (rememberPassword) {
      setLoginParams(JSON.stringify(params));
    } else {
      removeLoginParams();
    }
    // 记录登录状态
    localStorage.setItem('userStatus', 'login');
    // 跳转首页
    window.location.href = '/';
  }

  function login(params) {
    setErrorMessage('');
    setLoading(true);
    /*
        const { Auth, Message } = res;
        if(!Auth){
          setErrorMessage(Message)
          Notification.warning({            
            content: Message,
          })
          return;
        }
        */
    sessionStorage.setItem('name', 'name');
    sessionStorage.setItem('token','token');
    afterLoginSuccess(params);
    setLoading(false);
  }

  function onSubmitClick() {
    formRef.current.validate().then((values) => {
      login(values);
    });
  }

  // 读取 localStorage，设置初始值
  useEffect(() => {
    const rememberPassword = !!loginParams;
    setRememberPassword(rememberPassword);
    if (formRef.current && rememberPassword) {
      const parseParams = JSON.parse(loginParams);
      formRef.current.setFieldsValue(parseParams);
    }
    setIniting(true)
    
    sessionStorage.setItem('name', 'name');
    sessionStorage.setItem('token','token');
    afterLoginSuccess({});
    
    setIniting(false)
  }, [loginParams]);

  return (
    <div className={styles['login-form-wrapper']}>
      <Spin loading={initing}>
        <div className={styles['login-form-title']}>{t['login.form.title']}</div>
        <div className={styles['login-form-sub-title']}>
          {t['login.form.note']}
        </div>
        <div className={styles['login-form-error-msg']}>{errorMessage}</div>
        <Form
          className={styles['login-form']}
          layout="vertical"
          ref={formRef}
          initialValues={{ userName: '管理员', password: '' }}
        >
          <Form.Item
            field="userName"
            rules={[{ required: true, message: t['login.form.userName.errMsg'] }]}
          >
            <Input
              prefix={<IconUser />}
              placeholder={t['login.form.userName.placeholder']}
              onPressEnter={onSubmitClick}
            />
          </Form.Item>
          <Form.Item
            field="password"
            rules={[{ required: true, message: t['login.form.password.errMsg'] }]}
          >
            <Input.Password
              prefix={<IconLock />}
              placeholder={t['login.form.password.placeholder']}
              onPressEnter={onSubmitClick}
            />
          </Form.Item>
          <Space size={16} direction="vertical">
            <Button type="primary" long onClick={onSubmitClick} loading={loading}>
              {t['login.form.login']}
            </Button>
          </Space>
        </Form>
      </Spin>
    </div>
  );
}
